<template>
  <div class="brand">
    <!-- 品牌介绍 -->
    <div class="introduce">
      <div class="top">
        <div class="left"><img :src="intro.logo"><span>{{intro.brand_name}}</span></div>
        <div class="right" @click="baidu">品牌介绍&nbsp;<van-icon name="arrow" /></div>
      </div>
      <div class="bottom">{{intro.baike_content}}</div>
    </div>
    <!-- 热门车型 -->
    <van-grid 
      :border="false" 
      :column-num="3"
      >
      <van-grid-item
        v-for="item in hot"
        :key="item.nid"
      >
        <van-icon :name="item.img" size="100"/>
          {{item.seriesName}}
          <div class="floor">询底价</div>
        </van-grid-item>
      </van-grid>
      <!-- 分类 -->
      <van-tabs v-model="active" color="transparent" title-active-color="#00cecf">
        <van-tab v-for="(item,index) in type" :key="index">
          <template #title>{{item.name}}</template>
          <div v-for="(genre,index2) in item.list" :key="index2">
            <van-index-anchor :index="genre.name"></van-index-anchor>
            <div v-for="(model,index3) in genre.list" :key="index3" class="plate">
              <div class="lf">
                <img :src="model.img">
                <div>
                  <span class="name">{{model.seriesName}}</span>
                  <span class="price">{{model.price}}</span>
                </div>
              </div>
              <div class="rg">询底价</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Brand',
  data() {
    return {
      active: 0,
      intro:[],
      hot:[],
      type:[],
    }
  },
  async created(){
    await axios.get('http://localhost:9527/cars.json')
      .then(res=>{
        console.log(res)
        this.intro = res.data.Result
        this.hot = res.data.Result.hot_series
        this.type = res.data.Result.car_data[0].list
        console.log(res.data.Result.car_data[0].list)
      })
  },
  methods:{
    baidu(){
      location.href="https://baike.baidu.com/item/%E5%A5%A5%E8%BF%AA/24117"
    }
  }
}
</script>

<style lang="scss" scoped>
.brand{
  padding-top: 46px;
  .introduce{
    width: 80%;
    margin: 0 auto;
    margin-top: 28px;
    padding: 15px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 3px 8px 0 rgb(10 11 13 / 8%);
    .top{
      height: 50px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        display: flex;
        align-items: center;
        img{
          width: 40px;
          height: 40px;
        }
        span{
          display: block;
          margin-left: 16px;
          font-size: 19px;
          line-height: 19px;
          color: #333;
          font-weight: 700;
        }
      }
      .right{
        font-size: 15px;
        line-height: 15px;
        color: #333;
      }
    }
    .bottom{
      width: 100%;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      font-size: 16px;
      line-height: 25px;
      color: #333;
    }
  }
}
.brand ::v-deep{
  .van-grid{
    width: 100%;
    margin: 0 auto;
    padding: 15px 0 15px 0;
    .van-grid-item{
      width: 30%;
      .van-grid-item__content,.van-grid-item__content--center{
        font-size: 16px;
        line-height: 17px;
        text-align: center;
        color: #333;
        .floor{
          width: 69px;
          height: 32px;
          margin: 13px auto 0 auto;
          font-size: 14px;
          line-height: 32px;
          text-align: center;
          color: #fff;
          border-radius: 8px;
          background-color: #00cecf;
        }
      }
    }
  }
  .van-tabs{
    .van-tab{
    display: inline-block;
    width: 78px;
    height: 30px;
    margin-right: 12px;
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    color: #333;
    border-radius: 4px;
    background-color: #f8f9fb;
    }
    .van-index-anchor{
      height: 25px;
    padding-left: 17px;
    font-size: 12px;
    line-height: 25px;
    color: #666;
    background-image: linear-gradient(270deg,#fff,#f8f9fb 82%,#f8f9fb 99%);
    }
    .plate{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 101px;
      padding: 0 17px;
      background-color: #fff;
      .lf{
        display: flex;
        img{
          display: block;
          width: 100px;
          height: 67px;
        }
        div{
          display: flex;
          flex-direction: column;
          margin-left: 20px;
          justify-content: space-around;
          .name{
            font-size: 16px;
            line-height: 16px;
            color: #333;
          }
          .price{
            font-size: 14px;
            line-height: 14px;
            color: #fe4455
          }
        }
      }
      .rg{
          width: 69px;
          height: 32px;
          margin: 13px auto 0 auto;
          font-size: 14px;
          line-height: 32px;
          text-align: center;
          color: #fff;
          border-radius: 8px;
          background-color: #00cecf;
          margin: 0;
      }
    }
  }
}
</style>
